<template>
    <div class="footerInput">
        <!-- 未激活的小输入框 -->
        <div class="deactive" v-if="!isShowTextarea">
            <input type="text" @focus="showTextarea" v-model="content" />
            <div class="comment">
                <span class="iconfont iconpinglun-"></span>
                <div class="nums">112</div>
            </div>
            <span class="iconfont iconshoucang"></span>
            <span class="iconfont iconfenxiang"></span>
        </div>

        <!-- 已激活的大输入框 -->
        <div class="active" v-if="isShowTextarea">
            <textarea
                v-model="content"
                ref="textDom"
                rows="3"
                @blur="hideTextarea"
            ></textarea>
            <div class="btn" @click="sendComment">发送</div>
        </div>
    </div>
</template>

<script>
    import eventBus from "../../utils/eventBus";
    export default {
        data() {
            return {
                isShowTextarea: false,
                content: "",
                parentId: "",
            };
        },
        mounted() {
            // 页面挂载完毕, 利用事件总线 eventBus监听评论回复请求
            eventBus.$on("sendMsg", (parentId) => {
                this.showTextarea();
                this.parentId = parentId;
            });
        },
        // 用了事件总线的监听, 记得做一件事情
        // 在销毁组件的时候, 清除这个监听
        destroyed() {
            eventBus.$off("sendMsg");
        },
        methods: {
            showTextarea() {
                this.isShowTextarea = true;
                // 显示以后记得聚焦textarea
                // setTimeout(() => {
                //     this.$refs.textDom.focus();
                // }, 100);
                // 我们需要等到 vue 渲染出 textarea 之后再聚焦
                // 不过不知道什么时候完成, setTimeout 比较简单粗暴
                // vue 带有一个方法 $nextTick
                this.$nextTick(() => {
                    // 这里的回调会在下次渲染完毕时再执行
                    this.$refs.textDom.focus();
                });
            },
            hideTextarea() {
                // 如果立即隐藏, 可能跟发送评论冲突
                // 用延时器来留一个空隙
                setTimeout(() => {
                    this.isShowTextarea = false;
                    this.parentId = "";
                }, 100);
            },
            sendComment() {
                this.$axios({
                    url: "/post_comment/" + this.$route.params.id,
                    method: "post",
                    data: {
                        parent_id: this.parentId,
                        content: this.content,
                    },
                }).then((res) => {
                    console.log(res.data);
                    this.content = "";
                    // 发布评论完毕, 应该通知父组件获取新的评论
                    this.$emit("reloadComment");
                });
            },
        },
    };
</script>

<style lang="less" scoped>
    .footerInput {
        position: fixed;
        bottom: 0;
        left: 0;
        background: #f2f2f2;
        width: 100%;
        .deactive {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            height: 50 /360 * 100vw;
            input {
                width: 180 /360 * 100vw;
                height: 30 /360 * 100vw;
                padding: 0 15 /360 * 100vw;
                box-sizing: border-box;
                border-radius: 15 /360 * 100vw;
                background: #d7d7d7;
                border: none;
                outline: none;
            }
            .comment {
                position: relative;
                .nums {
                    position: absolute;
                    top: -5px;
                    left: 4px;
                    height: 14 /360 * 100vw;
                    line-height: 14 /360 * 100vw;
                    border-radius: 12 /360 * 100vw;
                    font-size: 12 /360 * 100vw;
                    background: red;
                    color: #fff;
                    padding: 0 4px;
                }
            }
            .iconfont {
                font-size: 24 /360 * 100vw;
            }
        }
        .active {
            display: flex;
            align-items: flex-end;
            padding: 10 /360 * 100vw;
            textarea {
                width: 260 /360 * 100vw;
                height: 90 /360 * 100vw;
                background: #d7d7d7;
                border: none;
                outline: none;
                border-radius: 10 /360 * 100vw;
                padding: 10 /360 * 100vw;
                box-sizing: border-box;
                resize: none;
            }
            .btn {
                background: red;
                color: #fff;
                font-size: 16 /360 * 100vw;
                height: 26 /360 * 100vw;
                line-height: 26 /360 * 100vw;
                border-radius: 13 /360 * 100vw;
                padding: 0 14 /360 * 100vw;
                margin-left: 10 /360 * 100vw;
            }
        }
    }
</style>